function initPlayersGrid(theme) {
	//var data = generatedata(200);
	var source =
	{
		datatype: "json",
		updaterow: function (rowid, rowdata, commit) {
			// synchronize with the server - send update command
			var data = "update=true&" + $.param(rowdata);
			$.ajax({
				dataType: 'json',
				url: 'db/players_data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
					// update command is executed.
					commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
					commit(false);
				}							
			});	
			commit(true);
		},
		addrow: function (rowid, rowdata, commit) {
			// synchronize with the server - send insert command
			console.log("add");
			var data = "insert=true&" + $.param(rowdata);
			$.ajax({
				dataType: 'json',
				url: 'db/players_data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
					// update command is executed.
					$("#jqxgrid").jqxGrid({ source: dataAdapter });
					commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
					commit(false);
				}							
			});	
			commit(true);
		},
		deleterow: function (rowid, commit) {
			// synchronize with the server - send insert command
			console.log("delete");
			var data = "delete=true&id=" + rowid;
			$.ajax({
				dataType: 'json',
				url: 'db/players_data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr) {
					// update command is executed.
					commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
					commit(false);
				}							
			});	
			commit(true);
		},
		datafields:
		[
			{ name: 'id', type: 'number' },
			{ name: 'firstName', type: 'string' },
			{ name: 'lastName', type: 'string' },
			{ name: 'email', type: 'string' },
		],
		url: 'db/players_data.php'
	};
	var dataAdapter = new $.jqx.dataAdapter(source);
	
	// initialize jqxGrid
	$("#jqxgrid").jqxGrid(
	{
		width: '420px',
		height: '400px',
		source: dataAdapter,
		editable: true,
		sortable: true,
		theme: theme,
		selectionmode: 'singlerow',
		columns: [
		  { text: 'ID', columntype: 'textbox', datafield: 'id', width: 20, editable : false },
		  { text: 'First Name', columntype: 'textbox', datafield: 'firstName', width: 100 },
		  { text: 'Last Name', datafield: 'lastName', columntype: 'textbox', width: 100 },
		  { text: 'Email', datafield: 'email', columntype: 'textbox', width: 175 },
		],
		showstatusbar: true,
		renderstatusbar: function (statusbar) {
			// appends buttons to the status bar.
			var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
			var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
			var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
			var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
			container.append(addButton);
			container.append(deleteButton);
			container.append(reloadButton);
			statusbar.append(container);
			addButton.jqxButton({ theme: theme, width: 60, height: 20 });
			deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
			reloadButton.jqxButton({ theme: theme, width: 65, height: 20 });
			// add new row.
			addButton.click(function (event) {
				var id = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                $("#jqxgrid").jqxGrid('addrow', id, []);
			});
			// delete selected row.
			deleteButton.click(function (event) {
				var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
				var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
				var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
				var rows = $('#jqxgrid').jqxGrid('getdisplayrows');
				var rowData = rows[id];
				$("#jqxgrid").jqxGrid('deleterow', rowData.id);
				$("#jqxgrid").jqxGrid({ source: dataAdapter });
			});
			// reload grid data.
			reloadButton.click(function (event) {
				$("#jqxgrid").jqxGrid({ source: dataAdapter });
			});
		}
	});
	// events
	$("#jqxgrid").on('cellbeginedit', function (event) {
		var args = event.args;
		console.log("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
		//$("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
	});
	$("#jqxgrid").on('cellendedit', function (event) {
		var args = event.args;
		console.log("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
		//$("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
	});
	
	
}

